<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8"/>
    <!-- <link href="favicon.ico" rel="shortcut icon">-->
    <link rel="shortcut icon" href="#"/>
    <title></title>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jsencrypt.min.js"></script>
</head>

<body>
<div id="app">
    {{msg}} -- {{name}}
    <div>
        <h3>用户信息</h3>
        姓名：<input placeholder="请输入账号" type="text" ref="username"/>&nbsp;&nbsp;
        <button @click="findUser()">查询用户</button>
        <ul>
            <li v-for="(item, index) in userList" :key="index">
                {{item.id}} -- {{item.username}} -- {{item.password}} -- {{item.phone}} --{{item.email}} --
                {{item.created}} --{{item.updated}}
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var decrypt = new JSEncrypt({

    });
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            name: "张三",
            privateKey: 'MIICdwIBADANBgkqhkiG9w0BAQEFAASCAmEwggJdAgEAAoGBAJ6tVRGKgBOtqpcOd8YgoX7mzlMOfUPjmJ/bPHA09+Hamdw9URqL2FnH3f1A9pwWtwyh/lOM6O08Lc1+ja/+qBIF7q/8wLzWGbgudqxOXf1fOcigURroDTxocN/rduprJH/rckzCO90VGMhXRovVmiz0YtHs6D6TgOFdHbLhmW/DAgMBAAECgYEAlTIbG3wjgt022gODgOorjvuLojKse4njduMXx9U2AcmeA6QvvwsgqQIxay+K8Sa2hI1IadzDIlUEKATHSmTiN1zxQliHxJsPcVbOvpUw1Y8/xLoXI1HuEFV3ns60O/JVAhtxybn54zaOxuas63VEUjSIBQ1OV0mfVUMFvbd66KkCQQDO7Eg/D90qPIfUKEqtqnlEZZWGunkwrg6DXbo7ilj9zVTfvyQikuzVnagwM2meGJTAoN10UJnSM7jK5Jgrguz9AkEAxE+1qp0BtZOtw/2FqMvmP6gTVfYLdFrpXYY5RiPE9/+2IlI10sG/eA9mPXfFHHUpm5acAVzgcSBtoPaErFbLvwJAGunIi8s4bOHqmMGU1PmzRB4iUJ+4W4iIArYSHuRjpr8qJt/ph0Ws4CvdUEefmRyBXHyP0S0alKh9hIYu9JnW0QJBAL+dUiRLhlyW3jh8oFcHVyHxS5ZPSBT1m+120za8OUkcZsoPVov2I47r8Q60dkh1r/w3QOUvo7+oOHmxxgR13/8CQEHwy3nsRAfWedYytRRW+XmJr1Q8AAMv79NosBj67qno928R7JLve2HVvl7ESrAvm+HfnC57xTFSthYHFxaKeW8=',
            userList: [
                {
                    id: "ID",
                    username: "姓名",
                    password: "密码",
                    phone: "手机",
                    email: "邮箱",
                    created: "创建时间",
                    updated: "更新时间"
                }
            ]
        },

        methods: {
            findUser() {

                axios.get("http://localhost:8081/user/list?username=" + this.$refs.username.value)
                    .then((res) => {
                    var result = res.data.data;
                alert(result);
                clearInterval(2000);
                    decrypt.setPrivateKey(this.privateKey);

                result =  decrypt.decrypt(result.toString());
                    // console.log(res.data.data);
                    // result = JSON.stringify(result);
                    // console.log(result);
                this.userList = this.userList.concat(result);
            })
            }
        },
    });


</script>
</body>
</html>
